<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_分区元素</title>

</head>
<body>
<!--1.行级分区元素 不会换行 不独占一行-->
<h1>今天开始,即将进入<span style="color: red">第三阶段</span>开始学习</h1>

今天是<span style="color: blue">2025年8月20日</span>,星期<span style="color: green">三</span>,<span style="color: orange">晴</span>

<!--2.块级分区元素 会换行 独占一行-->
<div>块级分区元素</div>
<div>块级分区元素</div>
<div>块级分区元素</div>
<hr>
<!--3.使用旧版实现-->
<div class="header">头部区</div>
<div class="nav">导航栏</div>
<div class="main">主体区</div>
<div class="footer">尾部区</div>
<hr>
<!--4.使用新版实现-->
<header>头部区</header>
<nav>导航栏</nav>
<main>主体区</main>
<footer>尾部区</footer>
</body>
</html>